import React from 'react'
import {
    Form,
    Input,
    Icon,
    Button,
    DatePicker,
    Radio,
    message,
    Select
  } from 'antd';

  import { SignUp } from '../api/sigin'
  const { Option } = Select;
// import Axios from 'axios';

class Register extends React.Component{
    state = {
        loading: false
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
        
        if (!err) {
            this.setState({
                loading: true
            })
            // console.log(this.state.loading)
            SignUp(values).then(response => {
                const { data } = response
                if (data.code === 0) {
                  message.success('注册成功', 1, () => {
                    // 跳转到登录页面
                    this.props.history.push('/login')
                  })
                } else {
                  message.error(data.msg)
                  this.setState({
                    loading: false
                  })
                }
              })
          }
        })
      }
      

    render() {
        const { getFieldDecorator } = this.props.form
        const { loading } = this.state
        const prefixSelector = getFieldDecorator('prefix', {
            initialValue: '86',
          })(
            <Select style={{ width: 70 }}>
              <Option value="86">+86</Option>
              <Option value="87">+87</Option>
            </Select>,
          );
        return (
            <Form onSubmit={this.handleSubmit} className="login-form">
                <Form.Item label="用户名">
                    {getFieldDecorator('username', {
                    rules: [{ required: true, message: '请输入用户名' }],
                    })(
                    <Input
                        prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                        placeholder="Username"
                    />,
                    )}
                </Form.Item>
                <Form.Item label="密码">
                    {getFieldDecorator('password', {
                        rules: [
                        {
                            required: true,
                            message: '请输入密码',
                        },
                        {
                            validator: this.validateToNextPassword,
                        },
                        ],
                    })(<Input.Password />)}
                </Form.Item>
                <Form.Item label="E-mail">
                    {getFieldDecorator('email', {
                        rules: [
                        {
                            type: 'email',
                            message: '请输入正确的邮箱',
                        },
                        {
                            required: true,
                            message: '请输入邮箱',
                        },
                        ],
                    })(<Input />)}
                </Form.Item>
                <Form.Item label="手机号">
                    {getFieldDecorator('phone', {
                        rules: [{ required: true, message: 'Please input your phone number!' }],
                    })(<Input addonBefore={prefixSelector} style={{ width: '100%' }} />)}
                </Form.Item>
                <Form.Item label="性别">
                    {getFieldDecorator('sex')(
                        <Radio.Group>
                        <Radio value="1">男</Radio>
                        <Radio value="2">女</Radio>
                        </Radio.Group>,
                    )}
                </Form.Item>
                <Form.Item label="生日" style={{ marginBottom: 0 }}>
                    {
                        getFieldDecorator('birthday')(
                            <DatePicker />
                        )
                    }
                </Form.Item>
                <Form.Item label="地址">
                    {getFieldDecorator('address', {
                    rules: [{ required: true, message: '请输入地址' }],
                    })(
                    <Input
                        prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
                        placeholder="address"
                    />,
                    )}
                </Form.Item>
                <Form.Item>
                    <Button type="primary"
                    htmlType="submit"
                    className="login-form-button"
                    loading={loading}>
                        注册
                    </Button>
                    <br />
                    <a href="http://localhost:3000/#/login" className="login-a">已有账号！点击登录！</a>
                </Form.Item>
            </Form>
        )
    }
}

export default Form.create()(Register)